<template>
    <div class="box">
        <!-- <h1>资讯信息</h1> -->
        <div class="query-box">
            <div class="line-center">
                <el-row>
                    <el-form ref="form" :model="infoQueryForm" size="small" label-width="70px">
                        <el-col :span="5">
                            <el-form-item label="标题" style="width: 220px;">
                                <el-input clearable v-model="infoQueryForm.infoTitle" placeholder="请输入资讯名标题"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="资讯类型" style="width: 210px">
                                <el-select clearable v-model="infoQueryForm.infoTypeId" placeholder="请选择发布状态">
                                    <el-option v-for="(item, index) in infoType" :key="index" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item>
                                <el-button @click="querySubmit" type="primary" plain
                                    icon="el-icon-search">搜索</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-button @click="HandleBatchDelete" type="danger" plain size="small"
                                icon="el-icon-delete">批量删除</el-button>
                        </el-col>
                        <el-col :span="3">
                            <el-button @click="addInfoFlag = true" type="success" plain size="small"
                                icon="el-icon-plus">添加资讯</el-button>
                        </el-col>
                        <el-col :span="3"></el-col>
                    </el-form>
                </el-row>
            </div>
        </div>
        <!-- {{ info }} -->
        <div class="table">
            <table-component @columnIds="getColumnIds" :loading="tableLoading" @statusColumn="chanageStatus"
                @getContent="content" :table-data="infoRespData" :column="infoColumn">
                <template v-slot:operate="{ row }">
                    <el-button @click="changeInfoCoumn(row.id)" type="text" size="small">
                        编辑
                    </el-button>
                    <el-button @click="deleteInfo(row.id)" style="color: red;" type="text" size="small">
                        删除
                    </el-button>
                </template>
            </table-component>
            <pagination-component :page-query="infoQueryForm" :page-total="infoTotal" @handleSizeChange="sizeChange"
                @handleCurrentChange="currentChange"></pagination-component>
        </div>

        <dialog-component v-if="isStatus" @submitStatus="dialogChanageStatus" :status-form-column="statusFormColumn"
            :form="infoForm" :width="'30%'" @handleClose="dialogClose" :content="infoContent" title="资讯状态"
            :dialog-visible="dialogFlag"></dialog-component>

        <dialog-component v-else :width="'50%'" @handleClose="dialogClose" :content="infoContent"
            :dialog-visible="dialogFlag" title="资讯内容"></dialog-component>

        <!-- 侧边框 -->
        <DrawerComponent :image-url="editInfoForm.img" :info-type="infoType" title="编辑资讯" @drawerSubmit="formSubmit"
            :config="drawerConfig" @handleClose="drawerClosed" :form="editInfoForm" :form-column="infoFormColumn">

        </DrawerComponent>

        <el-dialog width="30%" center title="添加资讯" :visible.sync="addInfoFlag">
            <el-form :model="form">
                <el-form-item label="添加资讯的数量">
                    <el-input-number v-model="num" controls-position="right" @change="handleInfoNum" :min="0"
                        :max="20"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addInfoFlag = false">取 消</el-button>
                <el-button :loading="loadingFlag" type="primary" @click="handleAddInfo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import TableComponent from '@/components/TableComponent.vue';
import PaginationComponent from '@/components/PaginationComponent.vue';
import DialogComponent from '@/components/DialogComponent.vue';
import DrawerComponent from '@/components/DrawerComponent.vue';
import { addInfo, updateInfoStatus, getInfoById } from '@/api/admin/common';
import { message, messageType } from '@/utils/message';
export default {
    components: { TableComponent, PaginationComponent, DialogComponent, DrawerComponent },
    data() {
        return {
            infoQueryForm: {
                infoTypeId: '',
                infoTitle: '',
                page: 1,
                pageSize: 10,
            },
            editInfoForm: {
                infoTitle: '',
                infoTypeId: '',
                info: '',
                infoContent: '',
                img: '',
                status: '',
            },
            infoFormColumn: [
                { prop: 'infoTitle', label: '标题', type: 'Input', width: '130' },
                { prop: 'infoTypeId', label: '资讯类型', type: 'Select', infoType: this.infoType, width: '300' },
                { prop: 'info', label: '信息', type: 'Input', width: '200' },
                { prop: 'infoContent', label: '资讯内容', type: 'Textarea', inputType: 'textarea', autosize: { minRows: 2, maxRows: 10 }, width: '120' },
                { prop: 'img', label: '资讯图片', type: 'upload', width: '120' },
                { prop: 'status', label: '发布状态', type: 'Select', optionLabel: [{ label: '未发布', value: '0' }, { label: '已发布', value: '1' }], width: '210' },
            ],
            drawerConfig: {
                size: '40%',
                drawer: false,
                direction: 'rtl',
            },
            infoColumn: [
                { prop: 'infoTitle', label: '标题', width: '140' },
                { prop: 'infoTypeName', label: '资讯类型', width: '120' },
                { prop: 'info', label: '信息', width: '200' },
                { prop: 'infoContent', label: '查看内容', width: '120' },
                { prop: 'img', label: '资讯图片', width: '120' },
                { prop: 'publishTime', label: '发布时间', width: '200' },
                { prop: 'hits', label: '点击量', width: '120' },
                { prop: 'status', label: '发布状态', status: ['未发布', '已发布'], width: '110' },
                { prop: 'createTime', label: '创建时间', width: '200' },
                { prop: 'updateTime', label: '修改时间', width: '200' },
            ],
            dialogFlag: false,
            infoContent: '',
            infoForm: {
                id: '',
                status: '',
            },
            isStatus: true,
            tableLoading: true,
            statusFormColumn: [
                {
                    label: '发布状态',
                    prop: 'status',
                    placeholder: '请选择发布状态',
                    statusValue: ['0', '1'],
                    optionLabel: [
                        { label: '未发布', value: '0' },
                        { label: '发布', value: '1' }
                    ],
                    type: 'Select',
                    width: '300px'
                }
            ],
            ids: [],
            addInfoFlag: false,
            num: 0,
            loadingFlag: false,
        }
    },
    mounted() {
        this.pageQueryInfoActions(this.infoQueryForm);
        this.queryInfoTypeActions();
        // this.testInfo();
    },
    computed: {
        ...mapState('info', ['infoRespData', 'infoTotal', 'infoType'])
    },
    methods: {
        ...mapActions('info', ['pageQueryInfoActions', 'queryInfoTypeActions', 'logicDeleteInfoByIdActions', 'logicBatchDeleteInfoByIdsActions', 'updateInfoActions']),
        handleInfoNum(value) {
            console.log('value-->', value);
            console.log('num-->', this.num);
        },
        async handleAddInfo() {
            this.loadingFlag = true;
            await addInfo(this.num).then(resp => {

                if (!resp) return;
                console.log(resp);
                this.loadingFlag = false;
                this.addInfoFlag = false;
                this.pageQueryInfoActions(this.infoQueryForm);
            }, error => {
                console.log(error);
            })
        },
        /* async testInfo() {
            await jsonpInfo().then(resp => {
                console.log(resp);
            }, error => {
                console.log(error);
            })
        }, */
        // 删除
        deleteInfo(id) {
            console.log(id);
            this.logicDeleteInfoByIdActions(id);
            setTimeout(() => {
                message(messageType().success, '操作成功');
                this.pageQueryInfoActions(this.infoQueryForm);
            }, 500);
        },
        HandleBatchDelete() {
            this.logicBatchDeleteInfoByIdsActions(this.ids);
            setTimeout(() => {
                message(messageType().success, '操作成功');
                this.pageQueryInfoActions(this.infoQueryForm);
            }, 500);
        },
        getColumnIds(ids) {
            this.ids = ids;
        },
        async dialogChanageStatus(form) {
            await updateInfoStatus(form).then(
                resp => {
                    if (!resp) return;
                    message(messageType().success, "操作成功");
                    this.dialogClose();
                    console.log('updateInfo-->', resp);
                },
                error => {
                    console.log(error);
                }
            )
            this.pageQueryInfoActions(this.infoQueryForm);

        },
        content(content) {
            this.dialogFlag = true;
            this.isStatus = false;
            console.log('isStatus-->', this.isStatus);
            this.infoContent = content;
        },

        // 搜素
        querySubmit() {
            this.pageQueryInfoActions(this.infoQueryForm);
        },

        /* selectChange(){}, */

        sizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageQueryInfoActions(this.infoQueryForm);
        },
        currentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageQueryInfoActions(this.infoQueryForm);
        },
        dialogClose() {
            this.dialogFlag = false;
        },
        chanageStatus(row) {
            console.log(row);
            this.infoForm.id = row.id;
            this.infoForm.status = String(row.status);
            this.isStatus = true;
            console.log('isStatus-->', this.isStatus);

            this.dialogFlag = true;
        },
        async changeInfoCoumn(id) {

            await getInfoById(id).then(resp => {
                if (!resp) return;
                this.editInfoForm = resp.data.data;
                this.editInfoForm.status = String(resp.data.data.status);
                console.log('123');
            }, error => {
                console.log(error);
            })

            this.drawerConfig.drawer = true;
            console.log('editInfoForm-->', this.editInfoForm);
            console.log(id);
        },
        formSubmit(form) {
            console.log('infoform-->', form);
            this.updateInfoActions(form);
            setTimeout(() => {
                this.drawerConfig.drawer = false;
                this.pageQueryInfoActions(this.infoQueryForm);
            }, 500)

        },
        drawerClosed() {
        }
    }
}
</script>
<style lang="scss">
.box {
    width: 100%;

    .query-box {
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        height: 55px;
        margin: 10px;

        .line-center {
            padding: 10px 10px 10px 5px;
        }
    }

    .table {
        margin: 10px;
        max-height: calc(100vh - 55px - 55px - 30px);
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        // 表格图片
        .el-image__error,
        .el_image,
        img {
            width: 60px;
            height: 60px;
            // border-radius: 50%;
        }
    }
}
</style>
